<template>
  <div class="forms-02-sign-up">
    <div class="text-field-input-blank">
      <div class="text-field-input-blank2">
        <div class="form"></div>
        <div class="enter-text">用户名</div>
      </div>
    </div>
    <div class="text-field-input-blank3">
      <div class="text-field-input-blank2">
        <div class="form"></div>
        <div class="enter-text">邮箱/手机号</div>
      </div>
    </div>
    <div class="text-field-input-blank4">
      <div class="text-field-input-blank2">
        <div class="form2"></div>
        <div class="enter-text2">发送验证码</div>
      </div>
    </div>
    <div class="text-field-input-blank5">
      <div class="text-field-input-blank2">
        <div class="form"></div>
        <div class="enter-text">密码</div>
      </div>
    </div>
    <div class="button-square-1-default-1-primary">
      <div class="group-12">
        <div class="button-color"></div>
        <router-link to="/login" class="button-text">开始使用</router-link>
      </div>
    </div>
    <svg
      class="arrow-left"
      width="45"
      height="40"
      viewBox="0 0 45 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5.625 20H39.375M18.75 31.6667L5.625 20L18.75 31.6667ZM5.625 20L18.75 8.33337L5.625 20Z"
        stroke="#2E3035"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>

    <div class="button-let-talk">
      <div class="rectangle"></div>
      <div class="services">Search</div>
    </div>
    <svg
      class="ic-search"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z"
        fill="white"
      />
    </svg>

    <svg
      class="menu"
      width="40"
      height="40"
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
        fill="#D2D5E7"
      />
    </svg>

    <div class="wiredunk"></div>
    <div class="rectangle4"></div>
    <div class="home">Home</div>
    <div class="services2">Support</div>
    <div class="services3">Contact</div>
    <div class="services4">Priceing</div>
    <div class="sign-up-to-discover">
      <span
        ><span class="sign-up-to-discover-span">注 册<br /></span
        ><span class="sign-up-to-discover-span2">R e g i s t e r<br /></span
      ></span>
    </div>
    <div class="wiredunk2">FILMACTION</div>
    <svg
      class="vector2"
      width="18"
      height="16"
      viewBox="0 0 18 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4 0V16M14 0V16M0 4H4M14 4H18M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
        stroke="#2E3035"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>

    <svg
      class="frame"
      width="24"
      height="19"
      viewBox="0 0 24 19"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M9 3.95833H7C6.46957 3.95833 5.96086 4.12515 5.58579 4.42208C5.21071 4.71901 5 5.12174 5 5.54167V15.0417C5 15.4616 5.21071 15.8643 5.58579 16.1613C5.96086 16.4582 6.46957 16.625 7 16.625H17C17.5304 16.625 18.0391 16.4582 18.4142 16.1613C18.7893 15.8643 19 15.4616 19 15.0417V5.54167C19 5.12174 18.7893 4.71901 18.4142 4.42208C18.0391 4.12515 17.5304 3.95833 17 3.95833H15M9 3.95833C9 4.37826 9.21071 4.78099 9.58579 5.07792C9.96086 5.37485 10.4696 5.54167 11 5.54167H13C13.5304 5.54167 14.0391 5.37485 14.4142 5.07792C14.7893 4.78099 15 4.37826 15 3.95833M9 3.95833C9 3.53841 9.21071 3.13568 9.58579 2.83875C9.96086 2.54181 10.4696 2.375 11 2.375H13C13.5304 2.375 14.0391 2.54181 14.4142 2.83875C14.7893 3.13568 15 3.53841 15 3.95833M9 11.0833L11 12.6667L15 9.5"
        stroke="#00D1FF"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>

    <div class="by-signing-up-you-ag">
      通过注册后，您即同意<br />我们的条款和隐私政策
    </div>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "Forms02SignUp",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.forms-02-sign-up,
.forms-02-sign-up * {
  box-sizing: border-box;
}
.forms-02-sign-up {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.text-field-input-blank {
  width: 330px;
  height: 48px;
  position: absolute;
  left: 210px;
  top: 328px;
}
.text-field-input-blank2 {
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  top: 0px;
  box-shadow: 0px 2px 7px 0px rgba(210, 222, 227, 0.46);
  overflow: hidden;
}
.form {
  background: #fcfdfe;
  border-radius: 6px;
  border-style: solid;
  border-color: #e9edf4;
  border-width: 1px;
  width: 330px;
  height: 48px;
  position: absolute;
  left: 0px;
  top: 0px;
  box-shadow: 0px 2px 7px 0px rgba(210, 222, 227, 0.46);
}
.enter-text {
  color: #acb6be;
  text-align: left;
  font: 400 14px/22px "Open Sans", sans-serif;
  position: absolute;
  left: 20px;
  top: calc(50% - 11px);
}
.text-field-input-blank3 {
  width: 330px;
  height: 48px;
  position: absolute;
  left: 210px;
  top: 391px;
}
.text-field-input-blank4 {
  width: 115px;
  height: 40px;
  position: absolute;
  left: 555px;
  top: 395px;
}
.form2 {
  background: #fcfdfe;
  border-radius: 6px;
  border-style: solid;
  border-color: #e9edf4;
  border-width: 1px;
  width: 115px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 0px;
  box-shadow: 0px 2px 7px 0px rgba(210, 222, 227, 0.46);
}
.enter-text2 {
  color: #292929;
  text-align: left;
  font: 400 14px/22px "Open Sans", sans-serif;
  position: absolute;
  left: 20px;
  top: calc(50% - 11px);
}
.text-field-input-blank5 {
  width: 330px;
  height: 48px;
  position: absolute;
  left: 210px;
  top: 454px;
}
.button-square-1-default-1-primary {
  width: 158px;
  height: 48px;
  position: absolute;
  left: 206px;
  top: 532px;
}
.group-12 {
  height: 48px;
  position: absolute;
  right: 0px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.button-color {
  background: #13c296;
  border-radius: 6px;
  width: 158px;
  height: 48px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.button-text {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Montserrat", sans-serif;
  position: absolute;
  right: 47px;
  left: 45px;
  bottom: 12px;
  top: 12px;
}
.arrow-left {
  position: absolute;
  left: 54px;
  top: 37px;
  overflow: visible;
}
.button-let-talk {
  width: 160px;
  height: 54px;
  position: absolute;
  left: 1054px;
  top: 33px;
  overflow: hidden;
}
.rectangle {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 160px;
  height: 54px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 51px;
  top: 18px;
}
.ic-search {
  position: absolute;
  left: 1236px;
  top: 50px;
  overflow: visible;
}
.menu {
  position: absolute;
  left: 1279px;
  top: 40px;
  overflow: visible;
}
.wiredunk {
  color: #212b36;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 214px;
  top: calc(50% - -307px);
}
.rectangle4 {
  width: 1440px;
  height: 100px;
  position: absolute;
  left: -660px;
  top: 648px;
}
.home {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 206px;
  top: 679px;
}
.services2 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 381px;
  top: 679px;
}
.services3 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 478px;
  top: 679px;
}
.services4 {
  color: #151828;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 289px;
  top: 679px;
}
.sign-up-to-discover {
  color: #212b36;
  text-align: left;
  position: absolute;
  left: 218px;
  top: 190px;
  width: 268px;
  height: 108px;
}
.sign-up-to-discover-span {
  color: #212b36;
  font: 600 40px/48px "Montserrat", sans-serif;
}
.sign-up-to-discover-span2 {
  color: #212b36;
  font: 600 32px/48px "Montserrat", sans-serif;
}
.wiredunk2 {
  color: #151828;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 218px;
  top: calc(50% - 358px);
}
.vector2 {
  position: absolute;
  left: 188px;
  top: 48px;
  overflow: visible;
}
.frame {
  position: absolute;
  left: 387px;
  top: 543px;
  overflow: visible;
}
.by-signing-up-you-ag {
  color: #637381;
  text-align: left;
  font: 300 12px/18px "Open Sans", sans-serif;
  position: absolute;
  left: 417px;
  top: 534px;
  width: 129px;
}
</style>
